<template>
  <div>
    <div class="ifBlank" v-if="allCount == 0" >
      <div v-if="isNone">
        <img src="../../assets/img/space_orders.png" alt="">
        <p>您还没有订单哦！</p>
      </div>
    </div>
    <div class="contents" v-else v-for="(v,i) in data" :key="i">
      <div style="width: 100vw;height: 10.67vw;line-height:6.67vw;border-bottom: 1px solid #f5f5f5">
        <div style="width: 92vw;height: 100%;margin: 0px auto;">
          <p style="color: #333;font-size: 13px;">订单号：{{v.order_no}}
            <span style="float: right;font-size: 12px;color: #ff4c50;">{{v.status}}</span>
          </p>
        </div>
      </div>
      <div class="sec" v-for="(v1,i1) in v.order_goods" :key="i1">
        <!--<router-link :to="'/detail?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+v1.goods_id">&lt;!&ndash;商品详情&ndash;&gt;-->
        <router-link :to="'/orderDetail?orderNum='+v.order_no">
          <img :src="v1.img" alt="">
          <div class="text">
            <p class="name">
              <span class="goodsName">{{v1.goods_name}}</span>
              <span class="types">￥{{v1.real_price}}</span>
            </p>
            <p class="size" style="magrin-top:1vw;">
              <span>规格:{{v1.spec_array}}</span>
              <span class="types" style="margin-right: -13vw">×{{v1.goods_nums}}</span>
            </p>
            <div class="seven" v-if="v1.is_seven_return == 0">七天无理由退换货</div>
          </div>
        </router-link>
        <div class="clear"></div>

      </div>
      <div style="color: #666;font-size: 12px;width: 100vw;height: 10.4vw;border-bottom: 1px solid rgba(245,245,245,.55);line-height: 10.4vw;">
          <div style="float: right;margin-right: 4vw">
            共{{v.goods_count}}件商品&nbsp;<span style="color: #333;">合计</span><span style="color: #ff4c50;">￥{{v.order_price}}</span>
          </div>
        </div>
        <div style="width: 100vw;height: 13.33vw;">
          <div class="btn">
            <button class="nOrder" v-if="v.operate.is_cancel == 1" v-on:click="cancelOrder(cancel,v.order_no)">取消订单</button>
            <button class="pay"  v-if="v.operate.is_to_pay == 1" @click="gotoPay(v)">付款 </button>
            <button class="pay" v-if="v.operate.is_comment == 1" @click="gotoApp(v)">评论 </button>
            <button class="pay" v-if="v.operate.is_confirm == 1" @click="querenOrder(queren,v.order_no)">确认收货 </button>
            <button class="pay" v-if="v.operate.is_deliver == 1" @click="gotoApp">查看物流 </button>
            <button class="nOrder" v-if="v.operate.is_delete == 1" v-on:click="deleteOrder(deletes,v.order_no)">删除订单 </button>
            <!--<button class="nOrder" v-if="v.operate.is_delete == 1" v-on:click="cancelOrder(deletes,v.order_no)">删除订单 </button>-->
          </div>
        </div>
    </div>
    <div>
      <van-popup v-model="show" position="bottom" show-cancel-button
                 style="position:fixed;top: 35vw;height: 52vh;overflow: hidden;border-radius: 2vw;width: 300px">
        <listAlertPay :actual="this.payable_total" :data="dataList" @close="close"
                      :order_sn="this.order_no" @isPay="isPay" v-if="!shows"></listAlertPay>
        <div v-else>
          <div style="text-align:center;padding-top: 50px" v-if="ispay">
            <img src="../../assets/img/mall_pay_suc@2x.png" alt="" style="width: 200px">
            <p style="font-size: 16px;margin-top: 20px">支付成功</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="toOrder">确定</button>
          </div>
          <div style="text-align:center;padding-top: 50px" v-else>
            <img src="../../assets/img/mall_pay_failure@2x.png" alt="" style="width: 200px">
            <p style="font-size: 16px;margin-top: 20px">支付失败</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="close">确定</button>
          </div>
        </div>
      </van-popup>
    </div>
      <!--<div class="ifBlank" v-if="allCount == 0">-->
  </div>
</template>

<script>
  import { Dialog } from 'vant'
  import request from '../../request/index'
  import listAlertPay from '../../components/vant/alertPay'
  export default {
        name: "orderList",
    components:{
      listAlertPay
    },
      props:["allCount","data","isNone"],
      inject:["reload"],
      data(){
        return{
          queren:3,
          cancel:1,
          deletes:2,
          article_id:0,
          limit_ids:0,
          group_ids:0,
          join_ids:0,
          groupType:0,
          cart_id:0,
          show:false,
          shows:false,
          isGetMethod:true,
          ispay:true,
          dataList:[],
          order_no:'',
          payable_total:''
        }
      },
      watch:{
        // '$route'(to, from) {
        //   this.$router.go(0);
        // }
      },
      methods:{
        isPay(res){
          // this.show=!this.show;
          this.shows=true;
          this.ispay=res;
        },
        close(){
          this.show = !this.show;
        },
        gotoPay(v){
          /*request.getListPay(this,v.order_no);*/
          /*request.getListPay(this,v.order_no);*/
          this.show =!this.show;
          if(this.isGetMethod){
            request.getPayMethod(this);
          }
          this.order_no = v.order_no;
          this.payable_total = v.payable_total;
        },
        toOrder(){
          this.$router.push({
            path: '/myOrder'+'?active='+2,
          })
          this.show=false;
          location.reload();
        },
        gotoApp(){
          Dialog.confirm({
            message: '是否前往App操作'
          }).then(() => {
            window.location.href="http://www.napin.com/download.html"
          }).catch(() => {

          });
        },
        cancelOrder(type,orderNum){
          Dialog.confirm({
            message: '是否确定取消订单'
          }).then(() => {
            request.cancelOrder(this,type,orderNum);
          }).catch(() => {

          });
        },
        deleteOrder(type,orderNum){
          Dialog.confirm({
            message: '是否确定删除订单'
          }).then(() => {
            request.cancelOrder(this,type,orderNum);
          }).catch(() => {

          });
        },
        querenOrder(type,orderNum){
          Dialog.confirm({
            message: '是否确认收货'
          }).then(() => {
            request.cancelOrder(this,type,orderNum);
          }).catch(() => {

          });
        },
        gotoPublish(v){
          window.localStorage.setItem('listGoods',JSON.stringify(v.order_goods));
          this.$router.push({
            path:'publishComment'
          })
        }
      }
    }
</script>

<style scoped lang="scss">
  .ifBlank{
    width: 100vw;
    height:91.5vh;
    padding-top: 20vh;
    background: #fff;
    div{
      width: 30vw;
      height: auto;
      margin: 0px auto;
    }
    img{
      width: 30vw;
      margin: 0px auto;
    }
    p{
      width: 100%;
      color: #666;
      text-align: center;
    }
  }
  .contents{
    width: 100vw;
    height: auto;
    background: #fff;
    padding-top: 4vw;
    border-bottom: 3vw solid #f5f5f5;

  .btn{
    float: right;
  .nOrder{
    border: 1px solid #666;
    color: #666;
  }
  .pay{
    border: 1px solid #ff4c50;
    color: #ff4c50;
  }
  button{
    width:18.67vw;
    height: 8vw;
    line-height: 8vw;
    text-align: center;
    background: #fff;
    border-radius: 4vw;
    margin-right: 4vw;
    margin-top: 3.3vw;
  }
  }
  .sec{
    width: 100vw;
    line-height:6.67vw;
    border-bottom: 1px solid #f5f5f5;
  .text{
    float: right;
    padding-top: 3vw;
    width: 73vw;
  .seven{
    width: 32vw;
    height: 4.34vw;
    color: #ff4c50;
    border: 1px solid #ff4c50;
    border-radius: 4vw;
    line-height: 4vw;
    text-align: center;
    margin-top: 4vw;
    font-size: 11px;
  }
  p{
    height: 5vw;
  .types{
    float: right;
    color: #FF4C50;
    font-size: 13px;
    margin-right: 4vw;
  }
  }
  .size{
    font-size: 12px;
    color: #666;
  }
  .name{
    font-size: 13px;
    color: #333;

  .goodsName{
    width: 41vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
  }
  }
  }
  img{
    width: 20vw;
    height: 20vw;
    float: left;
    margin-left: 4vw;
    margin-top: 2.67vw;
    border-radius: 3px;
  }
  }
  }
</style>
<style>
  .van-tabs__content{
    margin-top: 3vw !important;
  }
   .van-popup--bottom{
     width: 80vw;
   }
</style>
